<template>
  <div class="content-detail check-times">
    <div class="card-box--headerwrap">
      <el-page-header
        icon="el-icon-arrow-left"
        content="检查反馈详情"
        @back="handleBack"
      ></el-page-header>
    </div>

    <el-card>
      <el-timeline class="content-box">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :color="activity.color"
          :class="activity.type"
        >
          <div class="content-detail">
            <!-- :color="activity.color"
          :timestamp="activity.timestamp" -->
            <div class="node-box">
              <div class="left">{{ activity.nodeName }}</div>
              <div class="right">
                <span>{{ activity.assignee }}</span>
                <template v-if="activity.createTime">
                  <el-divider direction="vertical" />
                  <span>操作时间: {{ activity.createTime }}</span>
                </template>
              </div>
            </div>

            <el-form class="form-box" label-width="180px">
              <el-form-item
                v-for="(item, idx) in activity.opinion"
                :key="idx"
                :label="item.name + '：'"
              >
                <template v-if="typeof item.content === 'string'">
                  <span class="handle">{{ item.content }}</span>
                </template>

                <template v-else>
                  <!-- <div class="handle"> -->
                  <el-link
                    class="link-text"
                    :underline="false"
                    v-for="(obj, ins) in item.content"
                    :key="ins"
                    @click="handlePreview(obj)"
                    >{{ obj.name || obj.fileName }}</el-link
                  >
                </template>
              </el-form-item>
            </el-form>
          </div>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-if="!activities.length" description="暂无记录"></el-empty>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, defineEmits } from "vue";
import { postApproveHistory } from "/@/api/acceptance";
import { handlePreview } from "/@/utils/file";
const props = defineProps({
  instanceId: {
    type: Number || String,
    required: true
  }
});
const emit = defineEmits(["closeDetail"]);
const activities = ref([]);
const getTableData = async () => {
  const { instanceId } = props;
  if (!instanceId) {
    return;
  }
  const params = {
    instanceId
  };
  const { code, data } = await postApproveHistory(params);
  if (code === 200) {
    data.forEach(item => {
      // if (item.eflag === 1) {
      //   item.color = "#FF0000";
      // } else {
      //   item.color = "#409EFF";
      // }
      // if (item.type === "recall") {
      //   item.opinion = "撤回";
      // }

      if (item.opinion) {
        if (isJSON(item.opinion)) {
          item.opinion = JSON.parse(item.opinion);
        } else {
          if (item.opinion == "流程结束") {
            item.opinion = [{ name: "备注", content: "流程结束" }];
          }
          if (item.nodeId == "ACT_010") {
            // if (item.opinion.indexOf("备注") == -1) {
            //   item.opinion = [{ name: "备注", content: item.opinion }];
            // }
            item.opinion = [{ name: "备注", content: item.opinion }];
          }
        }
        item.opinion = item.opinion.filter(obj => {
          return obj.content?.length;
        });
      }
    });
    activities.value = data;
  }
};
const isJSON = str => {
  try {
    if (typeof JSON.parse(str) == "object") {
      return true;
    }
  } catch (e) {}
  return false;
};

const handleBack = () => {
  emit("closeDetail");
};

getTableData();
/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
watch(
  () => props.instanceId,
  () => {
    getTableData();
  }
);
/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
</script>
<style lang="scss" scoped>
.check-times {
  font-family: PingFangSC-Medium, PingFang SC;
  color: #495164;
  font-size: 16px;

  :deep .el-page-header__left {
    color: #5298ff;
    font-size: 16px;
    font-weight: 400;
  }

  .content-box {
    max-height: 60vh;
    overflow: auto;

    .content-detail {
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e4e8f2;

      .node-box {
        padding: 10px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fdfdff;

        .left {
          font-size: 16px;
          font-weight: bold;
          color: #495164;
        }

        .right {
          display: flex;

          .el-form-item__label {
            color: #495164;
          }

          align-items: center;
        }

        :deep .el-divider--vertical {
          margin: 0 12px;
        }

        span {
          font-weight: 400;
          color: #8895b7;
        }
      }

      .form-box {
        padding: 10px;

        :deep .el-form-item__label {
          color: #495164;
        }

        :deep .el-upload {
          display: none;
        }

        :deep .el-upload-list__item {
          margin-top: 4px;
        }

        .handle,
        .link-text {
          color: #8895b7;
          padding: 6px 0 6px 12px;
          background: #fdfdff;
          border-radius: 4px;
        }

        .link-text:hover {
          color: #5298ff;
        }
      }
    }
  }
}

:deep .el-timeline-item__tail {
  height: calc(100% - 16px);
  top: 16px;
}

:deep .el-timeline-item {
  margin-left: 10px;
}

:deep .end .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../../assets/done.png) no-repeat center center;
  left: -3px;
}

:deep .submit .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../../assets/submit.png) no-repeat center center;
  left: -3px;
}

:deep .reject .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../../assets/reject.png) no-repeat center center;
  left: -3px;
}

:deep .todo .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../../assets/ready.png) no-repeat center center;
  left: -3px;
}

:deep .transfer .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../../assets/ready.png) no-repeat center center;
  left: -3px;
}

:deep .end .el-timeline-item__tail {
  border-left: 2px solid #c2cade23;
}

:deep .submit .el-timeline-item__tail {
  border-left: 2px solid rgba(133, 223, 0, 0.2);
}

:deep .reject .el-timeline-item__tail {
  border-left: 2px solid #e45d5d23;
}

:deep .todo .el-timeline-item__tail {
  border-left: 2px solid rgba(82, 152, 255, 0.2);
}

:deep .transfer .el-timeline-item__tail {
  border-left: 2px solid rgba(82, 152, 255, 0.2);
}
</style>
